<template>
    <div class="page-container">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="Time range">
                <el-date-picker class="rangePicker" format="YYYY-MM-DD HH:mm" v-model="formInline.timeRange" type="datetimerange" range-separator="To" start-placeholder="Start date" end-placeholder="End date" />
            </el-form-item>
            <el-form-item label="PhoneNumber">
                <el-input v-model="formInline.address" />
            </el-form-item>
            <el-form-item label="Consignee">
                <el-input v-model="formInline.consignee" />
            </el-form-item>
            <el-form-item style="margin-right: 0;">
                <el-button type="primary" size="small" @click="onSubmit">Query</el-button>
                <el-button type="warning" size="small" @click="onReset">Reset</el-button>
                <el-button type="success" size="small" @click="onPrintItems">Print</el-button>
                <el-button type="info" size="small" @click="columnDialogVisible = true">column filter</el-button>
            </el-form-item>
        </el-form>

        <el-dialog v-model="columnDialogVisible" title="column filter" width="80%">
            <el-checkbox-group v-model="visibleColumns">
                <el-checkbox label="snum" value="snum">SNum</el-checkbox>
                <el-checkbox label="date" value="date">Date</el-checkbox>
                <el-checkbox label="time" value="time">DTime</el-checkbox>
                <el-checkbox label="address" value="address">Daddress</el-checkbox>
                <el-checkbox label="address" value="phoneNumber">PhoneNumber</el-checkbox>
                <el-checkbox label="consignee" value="consignee">Consignee</el-checkbox>
                <el-checkbox label="amount" value="amount">Amount</el-checkbox>
                <el-checkbox label="pickup" value="pickup">Pick up</el-checkbox>
                <el-checkbox label="pickupTime" value="pickupTime">Pick up Time</el-checkbox>
            </el-checkbox-group>
            <template #footer>
                <el-button @click="columnDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="onFilterColumnConfirm">确定</el-button>
            </template>
        </el-dialog>

        <el-table ref="multipleTableRef" :data="tableData" row-key="id" style="width: 100%" max-height="250" @selection-change="onSelectChange">
            <el-table-column fixed type="selection" width="55" />
            <el-table-column fixed prop="index" label="No" width="50" />
            <el-table-column v-if="showColumns.includes('snum')" prop="snum" label="SNum" width="150" />
            <el-table-column v-if="showColumns.includes('date')" prop="date" label="Date" width="120" />
            <el-table-column v-if="showColumns.includes('time')" prop="time" label="DTime" width="120" />
            <el-table-column v-if="showColumns.includes('address')" prop="address" label="Daddress" width="250" />
            <el-table-column v-if="showColumns.includes('phoneNumber')" prop="phoneNumber" label="PhoneNumber" width="150" />
            <el-table-column v-if="showColumns.includes('consignee')" prop="consignee" label="Consignee" width="120" />
            <el-table-column v-if="showColumns.includes('amount')" prop="amount" label="Amount" width="120" />
            <el-table-column v-if="showColumns.includes('pickup')" prop="pickup" label="Pick up" width="120" />
            <el-table-column v-if="showColumns.includes('pickupTime')" prop="pickupTime" label="Pick up Time" width="120" />
            <el-table-column v-if="showColumns.includes('status')" prop="status" label="Status" width="120" />

            <el-table-column fixed="right" label="Operations" min-width="300">
                <template #default="scope">
                    <el-button type="primary" size="small" @click.prevent="onDetailClick(scope)">
                        Detail
                    </el-button>
                    <el-button type="primary" size="small" @click.prevent="onEditClick(scope)">
                        Edit
                    </el-button>
                    <el-button type="success" size="small" @click.prevent="onPrintClick(scope)">
                        Print
                    </el-button>
                    <el-button type="warning" size="small" @click.prevent="onFeedBackClick(scope)">
                        Feed back
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <EditDialog v-if="editItem" :itemData="editItem" @close="editItem = null" @success="onEditSuccess" />
        <DetailDialog v-if="detailItem" :itemData="detailItem" @close="detailItem = null" />
        <FeedbackDialog v-if="feedBackItem" :itemData="feedBackItem" @close="feedBackItem = null" />
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import EditDialog from './editDialog.vue'
import DetailDialog from './detailDialog.vue'
import FeedbackDialog from './feedbackDialog.vue'
import { ElMessage } from 'element-plus'
const editItem = ref(null)
const detailItem = ref(null)
const feedBackItem = ref(null)
const selectItems = ref([])
const multipleTableRef = ref()
const formInline = reactive({
    consignee: '',
    address: '',
    timeRange: [],
})
const onDetailClick = (item) => {
    detailItem.value = item.row
}
const onReset = () => {
    formInline.consignee = ''
    formInline.address = ''
    formInline.timeRange = []
}
const onSelectChange = (data) => {
    selectItems.value = data
}
const onSubmit = () => {
    console.log('submit!')
}
const tableData = ref([
    {
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        phoneNumber: '087561****',
        zip: 'CA 90036',
        id: 1,
        index: 1,
        snum: '20250316000001',
        consignee: 'Kevin ***',
        date: '2025-03-16',
        time: '09:25',
        amount: '16.31',
        pickup: 'yes',
        pickupTime: '10:11',
        status: 'Delivered',
        menuItems: [
            { name: '红烧肉', count: '3', zf: '无', dj: '2', zj: '6' },
            { name: '西红柿炒鸡蛋', count: '3', zf: '无', dj: '2', zj: '6' },
            { name: '糖醋排骨', count: '3', zf: '无', dj: '2', zj: '6' },
        ]
    },
    {
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        phoneNumber: '087562****',
        zip: 'CA 90036',
        id: 2,
        index: 2,
        snum: '20250316000002',
        consignee: 'Mark ***',
        date: '2025-03-16',
        time: '11:36',
        amount: '22.46',
        pickup: 'no',
        status: 'Delivered',
        menuItems: [
            { name: '红烧肉', count: '3', zf: '无', dj: '2', zj: '6' },
            { name: '西红柿炒鸡蛋', count: '3', zf: '无', dj: '2', zj: '6' },
            { name: '糖醋排骨', count: '3', zf: '无', dj: '2', zj: '6' },
        ]
    },
    {
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        phoneNumber: '087563****',
        zip: 'CA 90036',
        id: 3,
        index: 3,
        snum: '20250316000003',
        consignee: 'Jack ***',
        date: '2025-03-16',
        time: '18:25',
        amount: '121.00',
        pickup: 'no',
        status: 'Delivered',
        menuItems: [
            { name: '红烧肉', count: '3', zf: '无', dj: '2', zj: '6' },
            { name: '西红柿炒鸡蛋', count: '3', zf: '无', dj: '2', zj: '6' },
            { name: '糖醋排骨', count: '3', zf: '无', dj: '2', zj: '6' },
        ]
    },
])

const onEditClick = (item) => {
    editItem.value = item.row
}
const onFeedBackClick = (item) => {
    feedBackItem.value = item.row
}
const onPrintClick = (item) => {
    ElMessage.success('printing...')
}
const onPrintItems = () => {
    if (selectItems.length === 0) {
        ElMessage.error('plaese select orders')
        return
    }
    ElMessage.success('printing...')
    selectItems.value = []
    if (multipleTableRef.value) {
        multipleTableRef.value.clearSelection()
    }
}
const onEditSuccess = (form) => {
    const index = tableData.value.findIndex(item => item.id === editItem.value.id)
    if (index > -1) {
        Object.assign(tableData.value[index], form)
        tableData.value = [...tableData.value] // 触发响应式更新
        ElMessage.success('edit success')
    }
    editItem.value = null
}

const showColumns = ref(['snum', 'date', 'time', 'address', 'phoneNumber', 'consignee', 'amount', 'pickup', 'pickupTime', 'status'])
const visibleColumns = ref(['snum', 'date', 'time', 'address', 'phoneNumber', 'consignee', 'amount', 'pickup', 'pickupTime', 'status'])

const columnDialogVisible = ref(false)
const onFilterColumnConfirm = () => {
    showColumns.value = visibleColumns.value
    columnDialogVisible.value = false
}

</script>
<style lang="scss" scoped>
.demo-form-inline {
    border-bottom: none;
    margin-bottom: 10px;
    padding: 16px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

    .el-form-item {
        margin-right: 15px;

        :deep(.el-form-item__label) {
            color: #606266;
        }
    }

    .el-button {
        margin-left: 10px;
        transition: all 0.3s ease;

        &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
    }
}

.demo-form-inline .rangePicker .el-range-input {
    width: 100px;
}

.demo-form-inline {
    :deep(.el-input__wrapper) {
        width: auto;

        .el-range-input {
            width: 120px;
        }
    }
}

.el-table {
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

    :deep(th.el-table__cell) {
        background-color: #f8f9fa;
    }

    :deep(.el-table__row--hover) {
        background-color: #f8fafc !important;
    }

    .el-button {
        padding: 6px 10px;
        border-radius: 4px;
    }
}
</style>